<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '支付测试页面',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <PageLayout navTitle="支付测试页面" backRouteName="people" routeMethod="pushTab">
    <h1>这是一个支付测试页面</h1>
    <button @click="pay">支付测试</button>
    <button @click="selectAddress">选择地址测试</button>
    <Popup
      label-width="150"
      label="姓名"
      :required="false"
      v-model="formData.user"
      :code="code"
      :setFieldsValue="setFieldsValue"
      :fieldConfig="fieldConfig"
    ></Popup>
    <wd-input
      v-model="address"
      placeholder="点击选择地址"
      readonly
      @click="selectAddress"
    ></wd-input>
    <!-- 使用条件渲染替代v-auth指令 -->
    <button v-if="hasPermission('user:add')">新增用户</button>
    <button v-if="hasPermission('seedOil:tbl_grows_address:edit')">编辑得油用户</button>

    <!-- 调试信息 -->
    <view style="margin-top: 20px; padding: 10px; background-color: #f0f0f0">
      <text>调试信息:</text>
      <view>权限列表长度: {{ permissionList.length }}</view>
      <view>是否包含权限: {{ permissionExists }}</view>
      <view>权限列表内容: {{ permissionList }}</view>
    </view>
    <SelectAddress
      ref="selectAddressRef"
      url="/seedOil/growsAddress/list"
      edit-page-name="GrowsAddressForm"
      @confirm="onSelectAddress"
    ></SelectAddress>
  </PageLayout>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { payApi } from '@/api/api'
import { http } from '@/utils/http'
import { wxpayResult } from '@/interface/request'
import { usePermission } from '@/hooks/usePermission'
import { useUserStore } from '@/store/user'
import { add } from 'lodash-es'
import SelectAddress from '@/components/SelectAddress/SelectAddress.vue'

export default defineComponent({
  name: 'OrderPayTest',
  setup() {
    const { hasPermission } = usePermission()
    const userStore = useUserStore()

    // 调试用的数据
    const permissionList = userStore.getPermissionList()
    const permissionExists = permissionList.includes('seedOil:tbl_grows_address:edit')

    const formData = ref({
      user: '',
      email: '',
      phone: '',
    })
    // online报表编码
    const code = ref('report_user')
    const fieldConfig = [
      {
        source: 'realname',
        target: 'user',
      },
      {
        source: 'email',
        target: 'email',
      },
      {
        source: 'phone',
        target: 'phone',
      },
    ]
    const setFieldsValue = (data) => {
      formData.value = { ...formData.value, ...data }
    }

    const address = ref('')
    const selectAddressRef = ref(null)
    const selectAddress = () => {
      selectAddressRef.value?.open()
    }
    const onSelectAddress = (item) => {
      address.value = item.address
    }
    return {
      formData,
      code,
      fieldConfig,
      setFieldsValue,
      hasPermission,
      permissionList,
      permissionExists,
      selectAddress,
      address,
      selectAddressRef,
      onSelectAddress,
    }
  },
  methods: {
    selectAddress() {
      uni.navigateTo({
        url: '/pages/address/index',
      })
    },
    async pay() {
      const res = await http.post(payApi.exchangeOrderPay, {
        orderId: '1976576591395729410', // 写死订单号
      })
      console.log('当前获得到的prepayid', res.result)
      const orderData: wxpayResult = res.result as wxpayResult
      // 订单对象，从服务器获取
      wx.requestPayment({
        timeStamp: orderData.timeStamp, // 时间戳字符串
        nonceStr: orderData.nonceStr, // 随机字符串
        package: orderData.packageValue, // 格式为 "prepay_id=xxx"
        signType: orderData.signType, // 签名算法类型
        paySign: orderData.paySign, // 签名值
        success: (res) => {
          this.getPayStatus('1976576591395729410')
          uni.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 2000,
          })
          /* 支付成功 */
        },
        fail: (err) => {
          /* 支付失败 */
          console.log(err)
        },
      })
    },
    async getPayStatus(orderId) {
      const res = await http.post(payApi.getPayStatus, {
        orderId: orderId,
      })
      console.log('当前获得到的支付状态', res.result)
      // 接口会返回Y/N；
      // Y：已支付；
      // N：未支付；
      // 只有在成功的时候才会继续走下一步。
      // 不使用微信或者uniapp自带的支付状态查询接口
    },
  },
})
</script>
<style lang="scss" scoped></style>
